<template>
    <div class="box">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="类型" prop="id" class="boas1">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="所属门店" prop="isShow" style="margin-top: 20px;">
                <el-select placeholder="">
                    <el-option label="显示" value="shanghai"></el-option>
                    <el-option label="隐藏" value="beijing"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="标题" prop="id" class="boas1">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="跳转地址" prop="id" class="boas2">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="摘要" prop="id" class="boas3">
                <el-input type="textarea">
                </el-input>
            </el-form-item>

            <quill-editor class="ql-editor" v-model="content" ref="myQuillEditor" :options="editorOption"
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
            </quill-editor>

            <el-button type="primary" style="width:80px; height: 40px; margin-left: 100px; margin-top: 20px;">确定</el-button>
            <el-button type="primary" style="width:80px; height: 40px; color: #000; background:#fff;">取消</el-button>
        </el-form>
    </div>
</template>
<script>
import { power, poweradd, editorle } from "@/api/roleManage";
export default {
    data() {
        return {
            ruleForm: {
                name: '',
                profile: "",
                actionsIds: ''
            },
            rolepowerlist: [],
            rules: {
                name: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                ],
                profile: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.ruleForm);
                    this.poweradd(this.ruleForm)

                    this.$message({
                        message: '添加成功',
                        type: 'success',
                        duration: "2000"
                    });
                    setTimeout(() => {
                        this.$router.push('/RoleManage')
                    }, 2000);
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        async getpoeer() {
            let { data: res } = await power()
            console.log(res);
            this.rolepowerlist = res
            this.geteditorle()

        },
        async poweradd() {
            let { data: res } = await poweradd(this.ruleForm)
            this.ruleForm = res

        },
        async geteditorle() {
            let { data: res } = await editorle({ id: this.$route.params.row })
            console.log(res);
        }

    },
    mounted() {
        this.getpoeer()
    }
}

</script>
<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

::-webkit-scrollbar {
    overflow: hidden;
}

.boas1 {
    padding-top: 20px;
    width: 1200px;
}

.boas2 {
    width: 320px;
    margin-top: 20px;
}

.boas3 {
    width: 1200px;

    margin-top: 20px;
}

.ql-editor {
    margin-left: 100px;
    height: 200px;

}
</style>
